<template>
    <div class="p-20">
        <Row :gutter="10" class="p-b-20">
            <#list columns as po>
				<#if po.isQuery=='Y'>
                    <Col span="3">
					<#if po.queryModel=='single'>
						<#if po.showType=='date'>
                                <DatePicker type="date" format="yyyy-MM-dd" v-model="params.${po.fieldName}" @on-change="getData(1)" size="small" />
						<#elseif po.showType=='radio' || po.showType=='checkbox' || po.showType=='select'>
                                <Select v-model="params.${po.fieldName}" filterable clearable>
                                    <Option value="0">选项1</Option>
                                    <Option value="1">选项2</Option>
                                    <Option value="2">选项3</Option>
                                </Select>
						<#else>
							<#if po.queryType == 'like'>
                                    <Input v-model="params.${po.fieldName}Key" placeholder="请输入${po.description}">
							<#else>
                                    <Input v-model="params.${po.fieldName}" placeholder="请输入${po.description}">
							</#if>
						</#if>
					<#else>
						<#if po.showType=='date'>
                                <DatePicker v-model="${po.fieldName}ParamsTime" type="daterange" :start-date="new Date()" placement="bottom-end" placeholder="选择起止${po.description}"></DatePicker>
						<#else>
                                <InputNumber v-model="params.${po.fieldName}Start" placeholder="从"></InputNumber>
                                <InputNumber v-model="params.${po.fieldName}End" placeholder="到"></InputNumber>
						</#if>
					</#if>
                    </Col>
				</#if>
			</#list>
            <Col span="2">
            <Button type="info" @click="getData(1)">搜索</Button>
            </Col>
            <Col span="2" class-name="text-r">
            <Button type="success" @click="showModal()">添加</Button>
            </Col>
        </Row>
        <Table border :columns="columns" :data="${className?uncap_first}.datas" ref="table">
            <template slot-scope="{ row }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="seeModal(row)">查看</Button>
                <Button type="success" size="small" style="margin-right: 5px" @click="handleAdd(row)">编辑</Button>
                <Button type="error" size="small" @click="handleDelete(row)">删除</Button>
            </template>
        </Table>
        <Col span="12" class-name="p-t-20 p-b-20">
        <Button type="primary" style="margin-right: 5px" @click="delSelection()">
            <Icon type="ios-trash-outline"></Icon>
            批量删除
        </Button>
        <Button type="primary" style="margin-right: 5px">
            <Icon type="ios-arrow-round-up"></Icon>
            批量导入
        </Button>
        <Button type="primary" @click="exportData()">
            <Icon type="ios-arrow-round-down"></Icon>
            批量导出
        </Button>
        </Col>
        <Col span="12" class-name="text-r p-t-20 p-b-20">
        <Page :current="page" :total="${className?uncap_first}.outputPage.totalResult" :page-size="params.rows" show-total @on-change="getData"/>
        </Col>

        <Modal :width="800" v-model="modal.detailShow" title="查看从业资格证" footer-hide>
            <#list columns as po>
                <#if po.isShowForm == 'Y'>
                    <Vcell title="${po.description}：">
                    <#if po.fieldType == 'Date'>
                        {{ util.timeFormat(modal.data.${po.fieldName}) }}
					<#else>
                        {{ modal.data.${po.fieldName} }}
					</#if>
                    </Vcell>
				</#if>
			</#list>
        </Modal>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {options} from '../options'
    import {util} from '@/libs'
    import {config} from '@/config'

    const _init = {}
    export default {
        data() {
            return {
                <#list columns as po>
					<#if po.isQuery=='Y' && po.queryModel=='group' && po.showType=='date'>
                        ${po.fieldName}ParamsTime: [],
					</#if>
				</#list>
                params: {rows: config.table.rows},
                options,
                util,
                columns: [
                    {type: 'selection', width: 60, align: 'center'},
                    <#list columns as po>
						<#if po.isShowList == 'Y'>
							<#if po.showType=='date'>
                            {
                                title: '${po.description}',
                                key: '${po.fieldName}',
                                render(h, w) {
                                    return h('span', util.timeFormat(w.row.${po.fieldName}))
                                }
                            },
							<#else>
                            {title: '${po.description}', key: '${po.fieldName}'},
							</#if>
						</#if>
					</#list>
                    {title: '操作', width: 180, slot: 'action'}
                ],
                modal: {
                    show: false,
                    detailShow: false,
                    loading: true,
					data: _init
				}
        	}
        },
        computed: {
            page() {
                return parseInt(this.$route.query.page) || config.table.page
            },
            ...mapState({
				${className?uncap_first}: state = > state.${className?uncap_first}
    		})
    	},
		created()
		{
			this.getData()
		},
		watch: {
			<#list columns as po>
				<#if po.isQuery=='Y' && po.queryModel=='group' && po.showType=='date'>
					${po.fieldName}ParamsTime(val){
					this.params.${po.fieldName}Start = val[0]
					this.params.${po.fieldName}End = val[1]
				}
				</#if>
			</#list>
		},
		methods: {
			getData(page = this.page){
				const params = {page}
				page > 1 ? this.$router.push({
					path: this.$route.path,
					query: {page}
				}) : this.$router.push({path: this.$route.path})
				Object.assign(params, this.params)
				util.delNullParams(params)
				return this.$store.dispatch('/${className}', params)
			},
            handleAdd(row) {
                row ? this.$router.push({ path: `${r'${this.$route.path}'}Form`, query: { id: row.id } }) : this.$router.push({ path: `${r'${this.$route.path}'}Form` })
            },
			seeModal(data){
				this.modal.detailShow = true
				this.modal.data = util.deepcopy(data)
			},
			handleDelete(data){
				this.$Modal.confirm({
					title: '确定删除吗？',
					onOk: () = > {
						this.deleteData(data)
					}
				})
			},
			deleteData(data){
				this.$store.dispatch('/Del${className}', data)
			},
			delSelection(){
				this.$Modal.confirm({
					title: '确定删除选择的数据吗？',
					onOk: () = > {
						this.$refs.table.getSelection().forEach(item = > this.deleteData(item))
					}
				})
			},
			exportData(){
				const data = this.$refs.table.getSelection().map(item = > {
					return {
						...item,
					}
				})
				if (data.length !== 0) {
					this.$refs.table.exportCsv({
						filename: `【${r'${Date.format(null)}'}】${description}`,
						columns: this.columns.filter(item = > (item.slot !== 'action') & (item.type !== 'selection')),
						data
					})
				} else {
					this.$Message.warning('未选择数据')
				}
			}
		}
    }
</script>
